<template>
  <div class="dizhi">
     <nav-bar>
        <div slot="title">修改订单信息</div>
      </nav-bar>
     <div class="login">
       <div class="all">
         <img src="~assets/img/m5.png" class="welcome" />
           <div class="user"></div>
           <input v-model="username" type="text" class="userinput" size="34" placeholder="输入收件人姓名">
           <div class="tel"></div>
           <input v-model="tel" type="tel" class="userinput" size="34" placeholder="输入收件人电话">
           <div class="address"></div>
           <input v-model="address" type="text" class="userinput" size="34" placeholder="输入收件地址">
           <input type="button" value="更改" class="register" @click="enter">
       </div>
     </div>
  </div>
</template>

<script>
  import navBar from '../profile/detail/components/navBar.vue'

  export default{
    name:'',
    data(){
      return {
          username:JSON.parse(window.sessionStorage.user).username,
          tel:JSON.parse(window.sessionStorage.user).tel,
          address:JSON.parse(window.sessionStorage.user).address
       }
    },
    methods:{
      enter(){
        let user={}
        user.username=this.username
        user.tel=this.tel
        user.address=this.address
        this.$bus.$emit("addressChange",user)
        this.$router.replace('/buy')
      }
    },
    components:{
      navBar
    }
  }
</script>

<style scoped>
  .login{
  	background:linear-gradient(to bottom,#dad421,#68eca3);
  	height: calc(100vh - 43px - 45px);
  	top: 0;
  	left: 0;
  	background-repeat: no-repeat;
    position: relative;
  }
  .all{
  	position: absolute;
  	top: 50%;
  	left: 50%;
  	transform: translate(-50%,-50%);
  	display: flex;
  	flex-direction: column;
  	justify-content: flex-end;
    width: 85%;
  }
  .welcome{
  	width: 100px;
  	height: 100px;
  	margin: 0 auto;
    margin-top: 40px;
  }
  .form{
  	height: 100%;
  	width: 100%;
  }
  .user{
  	width:10%;
  	height:10%;
  }
  .userinput{
  	font-size: 20px;
  	width: 80%;
  	height: 20%;
  	border-top: none;
  	border-left: none;
  	border-right: none;
  	background: none;
  	display: block;
  	margin: 0 auto;
  	margin-top: 10%;
  }
  .password{
  	width: 10%;
  	height:10%;
  }
  .register{
  	width: 90%;
  	height: 10%;
  	margin-left: 10%;
  	margin-top:2%;       /*看不懂*/
  	background: rgb(119, 244, 255);
  	color: white;
  	text-align: center;
  	font-size: 20px;
  	font-family: 黑体;
  	border: none;
  	border-radius:25px;       /*记得*/
  	display: block;
  	margin: 0 auto;
  	margin-top: 10%;
    margin-bottom: 15%;
  	padding: 10px 0px;
  	box-shadow:0 0 3px 2px rgba(127, 127, 127, 0.5);
  }
  .bottom{
  	display: flex;
  }
  ::placeholder{
  	color: rgba(255, 255, 255, 0.4);
  }
  a{
  	text-decoration: none;
  }
</style>
